<template>
  <div class="moduleManage">
    <div class="m_b10">
      <el-button type="primary" @click="handleAdd('add', '0')">
        + 添加父级模块</el-button
      >
    </div>
    <base-table
      :tableData="tableData"
      :tableColumn="tableTitle"
      :tableOption="tableOption"
      @action="handleButton"
      :isPage="false"
    ></base-table>

    <!-- 添加或编辑弹框 -->
    <addOrEidtDialog
      ref="moduleDialog"
      v-if="dialogObj.show"
      :Visible="dialogObj.show"
      :type="dialogObj.type"
      :dialogRow="dialogObj.dialogRow"
      @close="dialogObj.show = false"
      @refresh="getModuleList()"
    ></addOrEidtDialog>
  </div>
</template>
<script>
import baseTable from "@/components/Table/index.vue";
import { reactive, toRefs, onMounted } from "vue";
import { getModuleData, delModule } from "@/api/module";
import { ElMessage, ElMessageBox } from "element-plus";
import addOrEidtDialog from "./component/addOrEditModule.vue";
export default {
  name: "menu",
  components: { baseTable, addOrEidtDialog },
  setup() {
    const state = reactive({
      tableData: [],
      tableTitle: [
        { prop: "name", label: "模块名称" },
        { prop: "code", label: "模块编码" },
        {
          prop: "viewType",
          label: "视图类型",
          render(h) {
            if (h.viewType == 1) {
              return "子系统";
            } else if (h.viewType == 2) {
              return "分组";
            } else {
              return "模块";
            }
          },
        },
        { prop: "viewPath", label: "视图路径" },
      ],
      tableOption: {
        label: "操作",
        buttons: [
          { name: "添加", methods: "add", style: { color: "green" } },
          { name: "编辑", methods: "edit" },
          { name: "删除", methods: "delete", style: { color: "red" } },
        ],
      },
      dialogObj: {
        show: false,
        type: "add",
        dialogRow: {},
      },
    });

    onMounted(() => {
      getModuleList();
    });

    const getModuleList = () => {
      getModuleData({}).then((res) => {
        if (res.data.success) {
          state.tableData = res.data.data;
        }
      });
    };

    const handleAdd = (type, parentId) => {
      state.dialogObj.show = true;
      state.dialogObj.type = type;
      state.dialogObj.dialogRow.parentId = parentId;
    };
    const handleButton = ({ row, methods, index }) => {
      if (methods == "add") {
        handleAdd(methods, row.id);
      } else if (methods == "edit") {
        state.dialogObj.show = true;
        state.dialogObj.type = methods;
        state.dialogObj.dialogRow = row;
      } else {
        handleDelete(row, index);
      }
    };

    const handleDelete = (row, index) => {
      ElMessageBox.confirm(`确定删除该模块${row.name}?`, "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(() => {
          delModule({ id: row.id }).then((res) => {
            if (res.data.success) {
              ElMessage.success(res.data.msg);
              getModuleList();
            }
          });
        })
        .catch(() => {});
    };

    return { ...toRefs(state), getModuleList, handleAdd, handleButton };
  },
};
</script>
